import './App.css';
import React, {useEffect, useState} from 'react';
import _ from 'lodash';
import {Layout, Button, Drawer, message} from 'antd';
import ContentList from "./components/ContentList";
import {ShoppingCartOutlined} from '@ant-design/icons';
import ShoppingCart from "./components/ShoppingCart";


const { Header,Content } = Layout;

function App() {
  const [productList, setProductList] = useState([]);
  const [cartList, setCartList] = useState([]);
  const [visible, setVisible] = useState(false);
  //购物车展示
  const showDrawer = ()=>{
      setVisible(!visible)
  }

  useEffect(() => {
    const fetchData = async () => {
      try {
        // 使用 fetch 请求 products.json数据
        const response = await fetch('./products.json');
        // 将响应解析为 JSON
        const result = await response.json();
        // 设置产品数据
        setProductList(result.products);
      } catch (error) {
        // 处理错误
          message.error(`Fetch error:${error}`);
      }
    };

    // 调用数据获取函数
    fetchData();
  }, []); // 空数组作为依赖，表示仅在组件挂载时执行


    // console.log(cartList,'cartList')
    // 处理从子组件传递上来的值
    const handleChildClick = (value) => {
        // 父组件接收到的值:value
        const arr=cartList.filter((val) => val.id === value.id&&val.size === value.size)

        //判断是否是原有集合新增
        if(arr.length>0){
            //查询原数组，数值+1
            cartList.forEach(item=>{
                if(item.id!== value.id&&item.size !== value.size) return;
                if(item.id=== value.id&&item.size === value.size){
                    item.number=item.number+1
                }
            })
            setCartList(_.cloneDeep(cartList))
        }else{
            // 在这里处理从子组件传递上来的值
            const newArr=[value,...cartList]
            setCartList(newArr)
        }
    };
    // 处理从子组件传递上来的值
    const onChildChange =(value) =>{
        console.log(value,'changDate')
        setCartList(_.cloneDeep(value))
    }
  return (
        <Layout className="layoutStyle">
          <Header className="headerStyle">
              <span style={{fontSize:30}}>商品列表</span>
              <Button type="text" onClick={showDrawer}>
                  <ShoppingCartOutlined style={{fontSize:30,marginRight:-15}}/>
                  <span className="contentTitle">{cartList.length}</span>
              </Button>
          </Header>

          <Layout style={{height:"100%"}}>
            <Content style={{backgroundColor: "#FFFF",paddingLeft:133,paddingRight:133}}>
                {/*商品列表页*/}
              <ContentList productList={productList} onChildClick={handleChildClick}/>
            </Content>
          </Layout>
            {/*购物车抽屉*/}
            <Drawer
                style={{backgroundColor:'#1B1A20',width:'100%'}}
                title={
                    <div className="Title" style={{textAlign:'center',color:'#FFF',display:"flex",flexDirection:'row',justifyContent:'center'}}>
                        <ShoppingCartOutlined style={{fontSize:30}}/>
                        <span className="cartTitle" >{cartList.length}</span>
                        <span style={{fontSize:30,paddingLeft:10}}>Cart</span>
                    </div>
                }
                placement="right"
                closable={true}
                onClose={showDrawer}
                open={visible}
            >
                <ShoppingCart cartList={cartList} onChildChange={onChildChange}/>
            </Drawer>
        </Layout>
  );
}
export default App;
